<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>卡片布局案例1</title>
		<style>
			/*css 样式思路：
			1.通配选择器 微软雅黑 #f5f5f5 浅灰，外边框至0
			2.#product_card 边框，内边距，外边距，阴影【透明，1】，文字居中
			3.img：边框倒角，内外边距？【微调】
			4.h3：颜色，内外边距？【微调】
			5.p：字体大小 ，颜色
			6.p+span：span，内外边距？【微调】
			*/
		   img{
		   	border:1px solid lightgrey;
		   	padding-top:10px;
		   	padding-right:10px;
		   	padding-bottom:10px ;
			padding-left:10px ;
		   }
		   	 div#product_card{
		   		margin: 0 auto;
				text-align: center;
			 }
			p{
				color: #ff0000;
				
			}	
				 
			 P>span{
				 color: #ebebeb;
			 }
		</style>
	</head>
	<body>
		<!-- 网页 1.html 结构【原生图分析】 p指价格-->
		
		<div id="product_card">
			<img src="img/微信图片_20241225100528.jpg" width: "249px" height="350px" alt="汽车">
			<h3>小米SUV7</h3>
			<p>$279999.00</p>
			<p><span>已有<span>10万+人</span>评价</p>
		</div>
	</body>
</html>